<svelte:head>
	<link
		rel="stylesheet"
		href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
	/>
</svelte:head>
<div class="icons">
	<a href="#">
		<div class="layer">
			<span />
			<span />
			<span />
			<span />
			<span class="flex items-center justify-center"
				><svg
					t="1580194450242"
					class="text-white fill-current icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="9911"
					width="40"
					height="40"
					><path
						d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"
						p-id="9912"
					/></svg
				></span
			>
		</div>
		<span class="text">Facebook</span>
	</a>
	<a href="#">
		<div class="layer"><span /> <span /> <span /> <span /> <span class="fab fa-twitter" /></div>
		<span class="text">Twitter</span>
	</a>
	<a href="#">
		<div class="layer"><span /> <span /> <span /> <span /> <span class="fab fa-instagram" /></div>
		<span class="text">Instagram</span>
	</a>
	<a href="#">
		<div class="layer"><span /> <span /> <span /> <span /> <span class="fab fa-linkedin-in" /></div>
		<span class="text">Linkedin</span>
	</a>
	<a href="#">
		<div class="layer"><span /> <span /> <span /> <span /> <span class="fab fa-youtube" /></div>
		<span class="text">Youtube</span>
	</a>
</div>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Poppins', sans-serif;
	}

	.icons {
		display: inline-flex;
	}

	.icons a {
		margin: 0 25px;
		text-decoration: none;
		color: #fff;
		display: block;
		position: relative;
	}

	.icons a .layer {
		width: 55px;
		height: 55px;
		transition: transform 0.3s;
	}

	.icons a:hover .layer {
		transform: rotate(-35deg) skew(20deg);
	}

	.icons a .layer span {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		border: 1px solid #fff;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.icons a .layer span.fab {
		font-size: 30px;
		line-height: 55px;
		text-align: center;
	}

	.icons a:hover .layer span:nth-child(1) {
		opacity: 0.2;
	}

	.icons a:hover .layer span:nth-child(2) {
		opacity: 0.4;
		transform: translate(5px, -5px);
	}

	.icons a:hover .layer span:nth-child(3) {
		opacity: 0.6;
		transform: translate(10px, -10px);
	}

	.icons a:hover .layer span:nth-child(4) {
		opacity: 0.8;
		transform: translate(15px, -15px);
	}

	.icons a:hover .layer span:nth-child(5) {
		opacity: 1;
		transform: translate(20px, -20px);
	}

	.icons a:nth-child(1) .layer span,
	.icons a:nth-child(1) .text {
		color: #4267b2;
		border-color: #4267b2;
	}

	.icons a:nth-child(2) .layer span,
	.icons a:nth-child(2) .text {
		color: #1da1f2;
		border-color: #1da1f2;
	}

	.icons a:nth-child(3) .layer span,
	.icons a:nth-child(3) .text {
		color: #e1306c;
		border-color: #e1306c;
	}

	.icons a:nth-child(4) .layer span,
	.icons a:nth-child(4) .text {
		color: #2867b2;
		border-color: #2867b2;
	}

	.icons a:nth-child(5) .layer span,
	.icons a:nth-child(5) .text {
		color: #ff0000;
		border-color: #ff0000;
	}

	.icons a:nth-child(1) .layer span {
		box-shadow: -1px 1px 3px #4267b2;
	}

	.icons a:nth-child(2) .layer span {
		box-shadow: -1px 1px 3px #1da1f2;
	}

	.icons a:nth-child(3) .layer span {
		box-shadow: -1px 1px 3px #e1306c;
	}

	.icons a:nth-child(4) .layer span {
		box-shadow: -1px 1px 3px #4267b2;
	}

	.icons a:nth-child(5) .layer span {
		box-shadow: -1px 1px 3px #ff0000;
	}

	.icons a .text {
		position: absolute;
		left: 50%;
		bottom: -5px;
		opacity: 0;
		transform: translateX(-50%);
		transition: bottom 0.3s ease, opacity 0.3s ease;
	}

	.icons a:hover .text {
		bottom: -35px;
		opacity: 1;
	}
</style>
